<template>
    <lemon-message-basic class="lemon-message-money" :class="message.transfer_status != 1 ? 'claimed' : ''"
        :reverse="reverse" :message="message" :hide-name="hideName" :hide-time="hideTime">
        <template #content="props">
            <div class="money_view">
                <img src="@/assets/image/t3.png" />
                <div class="money_view_div" v-if="reverse">
                    <div class="money_other">
                        <div class="money_value">￥{{ props.transfer_price }}</div>
                        <div class="tips" v-if="props.content <= 0">{{ $t('chat.你发起了一笔转账') }}</div>
                        <div class="tips" v-else>{{ $t('chat.你发起了一笔延时') }}{{ props.content }}H{{ $t('chat.转账') }}</div>
                    </div>
                </div>

                <div class="money_view_div" v-else>
                    <div class="money_other">
                        <div class="money_value">￥{{ props.transfer_price }}</div>
                        <div class="tips" v-if="props.content <= 0">{{ $t('chat.你收到了一笔转账') }}</div>
                        <div class="tips" v-else>{{ $t('chat.待收款') }}{{ props.content }}H{{ $t('chat.内收款') }}</div>
                    </div>
                </div>
            </div>
            <!-- {{ props.content }} -->
        </template>
    </lemon-message-basic>
</template>
<script>
export default {
    name: "lemonMessageTransfer",
    inheritAttrs: false,
    inject: ["IMUI"],
    props: {
        reverse: Boolean,
        message: Object,
        hideName: Boolean,
        hideTime: Boolean
    },
    data() {
        return {
            msg: {}
        }
    }
};
</script>

<style lang="scss">
// background: #FCE1C3;


.lemon-message-money {


    .lemon-message__content-after {
        display: none;
    }

    &.lemon-message--reverse {
        .lemon-message__content:before {
            border-left-color: #FC9C38;
        }
    }

    .lemon-message__content {
        padding: 0;
        background: #FC9C38;

        &::before {
            border-right-color: #FC9C38;
        }

        img {
            background: transparent;
        }
    }
}

.claimed {
    &.lemon-message--reverse {
        .lemon-message__content:before {
            border-left-color: #FCE1C3;
        }
    }

    .lemon-message__content {
        padding: 0;
        background: #FCE1C3;

        &::before {
            border-right-color: #FCE1C3;
        }
    }
}
</style>
<style scoped lang="scss">
.money_view {
    width: 239px;
    height: 65px;
    padding: 0 12px;
    box-sizing: border-box;

    // background: url(@/assets/image/z1.png) no-repeat;

    // background: url(@/assets/image/red3.png) no-repeat;


    // background-size: 100% 100%;

    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;



    img {
        width: 42px;
        height: 42px;
    }

    .money_view_div {
        flex: 1;
        padding-left: 8px;
        box-sizing: border-box;
    }

    .money_other {

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .money_value {
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
        }

        .tips {
            font-size: 12px;
            color: #FFFFFF;
        }
    }
}
</style>
